<template>
  <div>
       <!-- 当我们的 floorItem 有 parent 的时候,就要递归的调用自己,每次都将拿到的 floorItem.parent 传进去,作为下一个 楼层组件得 floorItem 之所以放在上面，是因为保证用户发布的最新信息出现在最上方 递归-->
      <commentFloor v-if="floorItem.parent" :floorItem="floorItem.parent" :parentLength="parentLength-1" @reply="reply"/>
      <div class="floorWrapper">
          <div class="meta">
              <div class="info">
                {{parentLength}}：{{floorItem.user.nickname}}
              <div class="time">
                  2小时前
              </div>
              </div>
              <div class="btnReply" @click="reply">
                  回复
              </div>
          </div>
          {{floorItem.content}}
      </div>
  </div>
</template>

<script>
export default {
    // 给组件设置个name属性，可以使用自己调用自己，递归方法
    name: 'commentFloor',
    props: ['floorItem','parentLength'],
    methods: {
        reply(data){
            if (data.id) {
                // console.log(data)
                // 这个函数,有可能是自己触发的,
            // 那么这个 data 就是点击事件本身,没有 id
            // 我就应该往上一层传递自己的 id 
            //  this.$emit('reply', {id: this.floorItem.id})
            // data指的是{id: this.floorItem.id}
            // 也有可能是前一层递归的子组件触发,
            // 这个 data 就会是前一层带过来的那个对象
            // 里面有 id
            // data有id证明是由子组件传过来父组件的，验证是不是子组件传过来的，没有id，直接把自己的id传出去
            // 如果 data.id 存在证明 是前面的递归层传出来的数据
            // 我要原封不动继续往下传
                this.$emit('reply', data)
            }else {
                // console.log(data)
                // 要是点击的是最上层，就没有data.id 就把自己的id传出去，
                 this.$emit('reply', {
                    id: this.floorItem.id
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.floorWrapper{
    padding: 2.778vw;
    border: 1px solid #eee;
    font-size: 3.889vw;
    .meta{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5.556vw;
        .info{
            font-size: 3.889vw;
            display: flex;
            .time{
                padding-left: 4.167vw;
                font-size: 3.333vw;
                color: #9d9d9d;
            }
        }
        .btnReply{
            font-size: 3.333vw;
            color: #9d9d9d;
        }
    }
}
</style>